<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0
    }

    #box {
      width: 100px;
      height: 100px;
    }
  </style>
</head>

<body>
  <div id="box" > box </div>
  <p class="p" onclick="say()"> 点我一下</p>
<!-- 工作中常用的 校验方法 -->
  <p class="p" onclick="alert('你好')"> 我是第二个p标签</p> 
  <!-- <img src="a.jpg" alt=""> -->
  <!-- 域的改变   使用onchange -->
  <select name="" id=""> 
    <option value="">篮球</option>
    <option value="">足球</option>
    <option value="">羽毛球</option>
  </select>
  <input type="text" class="userName" >
</body>

<script>
  // js 是事件驱动为核心的语言
  //改变是由事件触发
  //灯的开关 
  //需要点击开关  才会引发 灯变亮或者暗

  //事件三要素
  //点击 动作(事件) 点击  鼠标划入或者划出  或者键盘 
  // 开关 (事件源)
  //灯变暗或者亮 (效果  事件处理结果   事件处理程序)
  //点击box box背景变红
  //先找事件 (点击);
  // onclick 点击事件
   //事件源 (box)
  //  var  img = document.querySelector('img'); src 不是style,
  //  img.src=''
   var box = document.querySelector('#box');
   box.onclick = function(){//属性绑定
    box.style.backgroundColor = 'red';
   };
  //事件处理程序 (背景变红)
  // 表单事件补充
  // oninput  输入框值改变触发

   //获取input事件源
   var inputEl = document.getElementsByTagName('input')
   inputEl[0].oninput = function(){
     console.log('input正在输入....')
   }

   //行内绑定
   function say(){
     alert('点击我了');
   }
</script>

</html>